<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户端管理</title>
    <link rel="icon" href="images/favicon.ico"/>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/common.css" media="all">
</head>

<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <table id="clientTable" lay-filter="clientTable" class="layui-table"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="clientTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;

        // 渲染表格
        table.render({
            elem: '#clientTable',
            url: base_server + 'oauth/client',
            page: false,
            where: {
                access_token: getToken().access_token
            },
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {field: 'client_name', sort: true, title: '客户端'},
                {field: 'client_id', sort: true, title: 'client_id'},
                {field: 'raw_client_secret', sort: true, title: 'client_secret'},
                {field: 'scope', sort: true, title: 'scope'},
                {field: 'web_server_redirect_uri', sort: true, title: 'redirect_uri'},
                {toolbar: '#clientTableBar', align: 'center', title: '操作', minWidth: 150}
            ]]
        });

        // 添加按钮点击事件
        $('#clientBtnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(clientTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDelete(obj.data.client_id);
            }
        });

        // 删除
        function doDelete(client_id) {
            top.layer.confirm('确定删除此客户端吗？', function (i) {
                top.layer.close(i);
                layer.load(2);
                $.ajax({
                    url: base_server + 'oauth/client',
                    data: {
                        client_id: client_id,
                        access_token: getToken().access_token
                    },
                    type: 'DELETE',
                    dataType: 'JSON',
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.code == 200) {
                            layer.msg(data.msg, {icon: 1});
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    }
                });
            });
        }

        // 显示表单弹窗
        function showEditModel(data) {
            top.layer.open({
                type: 1,
                title: data ? '修改用户' : '添加用户',
                content: 'page/system/userForm.html',
                end: function () {
                    admin.getTempData('formOk') && table.reload('userTable');  // 成功刷新表格
                }
            });
        }

    });
</script>
</body>
</html>